<script setup lang="ts">
import { UserRoundCog, Key } from 'lucide-vue-next';
import Security from './components/security.vue';
import Info from './components/info.vue';

const currentTab = ref('info');
</script>

<template>
  <div class="flex gap-2">
    <div class="w-1/5">
      <div class="space-y-4 py-4">
        <div class="px-3 py-2">
          <h2 class="mb-2 px-4 text-lg font-semibold tracking-tight">
            账号设置
          </h2>
          <div class="space-y-1">
            <Button
              :variant="currentTab === 'info' ? 'default' : 'ghost'"
              class="w-full justify-start"
              @click="currentTab = 'info'"
            >
              <UserRoundCog />
              个人信息
            </Button>
            <Button
              :variant="currentTab === 'security' ? 'default' : 'ghost'"
              class="w-full justify-start"
              @click="currentTab = 'security'"
            >
              <Key />
              账号安全
            </Button>
          </div>
        </div>
      </div>
    </div>

    <Info v-if="currentTab === 'info'" />
    <Security v-if="currentTab === 'security'" />
  </div>
</template>
